<template>
  <div>
    <template>
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>课程预览</span>
          </div>
          <div class="text item">
            <el-button type="primary" @click.native="addCoursePage">新增页面</el-button>
            <el-button type="primary" @click.native="preview">课程预览</el-button>
            <el-select v-model="templateId" placeholder="请选择模板">
              <el-option
                v-for="u in templateList"
                :key="u.templateId"
                :label="u.templateName"
                :value="u.templateId">
              </el-option>
            </el-select>
            <br/><br/>
            <span v-if="previewurl && previewurl!=''"><a :href="previewurl" target="_blank">点我查看课程预览页面 </a> </span>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>生成页面</span>
          </div>
          <div class="text item">
            <div v-if="course.status == '202001'">
              状态：制作中<br/>
              <el-button type="primary" @click.native="createPage">生成新课程页面</el-button>
            </div>
            <div v-if="course.pageId!=null&&course.pageId!=''">
              状态：页面数据已生成<br/>
              <el-button type="primary" @click.native="staticHtml">静态化新课程页面</el-button>
            </div>
            <div v-if="ifStaticHtml">
              状态：已静态化<br/>
              <el-button type="primary" @click.native="publish">发布新课程页面</el-button>
            </div>
            <div v-if="course.status=='202002'">
              状态：已发布<br/>
              <span><a :href="'http://localhost/'+this.cmsPage.pageWebPath+'/'+cmsPage.pageName"
                       target="_blank">点我查看页面 </a> </span>
            </div>
            <!--            <div v-else-if="course.status == '202003'">-->
            <!--              状态：已下线-->
            <!--              <br/><br/>-->
            <!--              <span><a :href="'http://www.zaixian.com/course/detail/'+this.courseid+'.html'"-->
            <!--                       target="_blank">点我查看课程详情页面 </a> </span>-->
            <!--            </div>-->
            <!--            <div v-else-if="course.status == '202002'">-->
            <!--              状态：已发布<br/>-->
            <!--              &lt;!&ndash;              <el-button type="primary" @click.native="publish">修改发布</el-button>&ndash;&gt;-->
            <!--              <br/><br/>-->
            <!--              <span><a :href="'http://localhost/course/preview/'+this.courseid+'/'+ this.templateId"-->
            <!--                       target="_blank">点我查看课程详情页面 </a> </span>-->
            <!--            </div>-->
          </div>
        </el-card>
      </div>
    </template>
  </div>
</template>
<script>
    import * as sysConfig from '@/../config/sysConfig';
    import * as courseApi from '../../api/course';
    import utilApi from '../../../../common/utils';
    import * as systemApi from '../../../../base/api/system';

    export default {

        data() {
            return {
                dotype: '',
                courseid: '',
                course: {},
                previewurl: '',
                templateList: [{"templateId":"5a925be7b00ffc4b3c1578b5","templateName":"课程详情"}],
                templateId: '5a925be7b00ffc4b3c1578b5',

                cmsPage: {},//页面信息，用于发布后的访问
                ifStaticHtml: false,//是否生成了静态页面
            }
        },
        methods: {
            //查询模板list
            queryTemplateList() {
                courseApi.template_list(1, 0, null).then((res) => {
                    this.templateList = res.queryResult.list;
                })
            },
          //新增页面
          addCoursePage() {

            courseApi.addCoursePage(this.courseid, this.templateId).then(res => {
              if (res.success) {
                this.$message.success("页面新增成功，可以接着完成预览以及静态化和发布");
                this.course.pageId = res.message;
              } else {
                this.$message.error(res.message)
              }

            })


          },
            //预览
            preview() {
              console.log("why?????????????????????")
              courseApi.preview(this.course.pageId).then(res => {
                  window.open(res.previewurl)

              })
            },
            //生成页面（也就是新增cmspage表）
            createPage() {
                //检查是否选择了模板
                if (this.templateId == null) {
                    this.$message.error("请先选择模板");
                    return;
                }
                courseApi.publish(this.courseid, this.templateId).then(res => {
                    if (res.success) {
                        this.$message.success("页面生产成功，点击静态化即可生成静态页面");
                        this.course.pageId = res.message;
                    } else {
                        this.$message.error(res.message)
                    }

                })
            },
            //真的发布
            publish() {
                if (!this.ifStaticHtml) {
                    this.$message.error("课程页面还未生成，无法静态化");
                    return;
                }
                courseApi.publish_real(this.course.pageId, this.course.id).then(res => {
                    if (res != null) {
                        this.$message.success("发布成功，请点击下边的链接查看发布的页面");
                        this.course.status = '202002';
                        this.cmsPage = res;
                    } else {
                        this.$message.error("发布失败")
                    }

                })
            },
            staticHtml() {
                if (!this.course.pageId) {
                    this.$message.error("请先生成页面，再静态化");
                    return;
                }
                courseApi.staticHtml(this.course.pageId).then(res => {
                    if (res.success) {
                        this.$message.success("静态化页面成功，点击下方即可发布页面")
                        this.ifStaticHtml = true;
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            //获取课程状态
            getCourseView() {
                courseApi.findCourseView(this.courseid).then(res => {
                    debugger
                    if (res) {
                        this.course = res;
                        debugger
                        //若发布了，获取页面信息;
                        if (res.pageId) {
                            courseApi.getCmsPage(this.course.pageId).then(res1 => {
                                if (res1) {
                                    this.cmsPage = res1;
                                }
                            })
                        }

                    }
                })
            },
        }
        ,
        mounted() {
            //课程id
            this.courseid = this.$route.params.courseid;
            //查询课程信息
            this.getCourseView();
            //查询模板列表
            this.queryTemplateList();
        }

    }
</script>
<style>

</style>
